<template>
  <div>
    <div style="padding: 10px" v-if="canEdit">
      <el-button type="primary" size="mini" @click="addRow()">新增</el-button>
      <el-button type="danger" size="mini" @click="delRow(selectedRows)">删除</el-button>
    </div>
    <!-- EL表格组件 -->
    <el-table
      :data="data"
      style="width: 100%"
      :row-key="rowKey"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column prop="actionCode" label="编码" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row['actionCode']" placeholder="请输入编码"
                    v-if="canEdit&&(!scope.row.isEdit||scope.row.isEdit)"/>
          <span v-else>{{ scope.row['actionCode'] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="actionName" label="名称" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row['actionName']" placeholder="请输入编码" v-if="canEdit&&(!scope.row.isEdit||scope.row.isEdit)"/>
          <span v-else>{{ scope.row['actionName'] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="actionPriceOne" label="比重" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row['actionPriceOne']" placeholder="请输入比重" v-if="canEdit&&(!scope.row.isEdit||scope.row.isEdit)"/>
          <span v-else>{{ scope.row['actionPriceOne'] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="delRow(scope.row)" :disabled="!canEdit">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    &lt;!&ndash; EL分页组件 &ndash;&gt;-->
    <!--    <pagination-->
    <!--      v-show="pagination.total>0"-->
    <!--      :total="pagination.total"-->
    <!--      :page.sync="pagination.current"-->
    <!--      :limit.sync="pagination.pageSize"-->
    <!--      :limit="10"-->
    <!--      @pagination="loadData"/>-->
  </div>
</template>

<script>
import {FTableMixin} from "@/minxins/table/FTableMixin";

export default {
  name: "processAction",
  mixins: [FTableMixin],
  props: {
    url: {
      type: Object,
      default: () => {
        return {};
      }
    },
    columns: {
      type: Array,
      default: () => {
        return [];
      }
    },
    rowKey: {
      type: String,
      default: "id"
    },
    canEdit: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      loadOnCreated: false,
      enablePage: false
    }
  },
  methods: {
    addRow: function () {
      this.data.push({status: 0, isEdit: true});
    },
    delRow: function (obj) {
      if (obj instanceof Array) {
        if (obj.length === 0) {
          this.$message.warning('请至少选择一行删除');
          return;
        }
        obj.forEach(this.addDelMark);
      } else {
        this.addDelMark(obj);
      }
      this.data = this.data.filter(item => {
        if (!item.remove) {
          return item;
        }
      })
    },
    /*
    添加删除标记，deleted 假删除 / remove 直接移除
     */
    addDelMark: function (row) {
      if (row[this.rowKey]) {
        row.deleted = 1;
      } else {
        row.remove = true;
      }
    }
  }
}
</script>

<style scoped>

</style>
